<template>
	<div class="wrap">
		<!-- 搜索条件 -->
		<el-form ref="form" :inline="true" size="small" :model="forms" class="form" label-width="100px">
			<el-form-item label="用户手机号" prop="player_mobile">
				<el-input
					v-model="forms.player_mobile"
					placeholder="请输入"
					clearable
					style="width: 175px"
				/>
			</el-form-item>
			<el-form-item label="用户姓名" prop="player_name">
				<el-input v-model="forms.player_name" placeholder="请输入" clearable style="width: 175px" />
			</el-form-item>
			<el-form-item label="用户身份证号" prop="player_cid">
				<el-input v-model="forms.player_cid" placeholder="请输入" clearable style="width: 175px" />
			</el-form-item>
			<el-form-item label="赛事名称：" prop="race_id">
				<el-select
					v-model="forms.race_id"
					placeholder="请选择"
					style="width: 175px"
					clearable
					filterable
				>
					<el-option label="全部" value="" />
					<el-option label="未支付" value="-1" v-for="item in raceOptions" :key="item.id" />
				</el-select>
			</el-form-item>
			<p class="line">
				<el-button icon="el-icon-search" type="primary" size="small" @click="loadData">
					搜索
				</el-button>
			</p>
		</el-form>
		<div class="answer-bot">
			<el-row class="dropdonRow" type="flex" align="middle">
				<el-button
					type="primary"
					size="small"
					@click="onSubmitPass()"
					:disabled="!multipleSelection.length"
				>
					批量审核通过
				</el-button>
				<el-button
					type="danger"
					size="small"
					@click="onSubmitRefuse()"
					class="pink-btn"
					:disabled="!multipleSelection.length"
				>
					批量拒绝退费
				</el-button>
			</el-row>
			<el-table
				style="margin-top: 15px"
				:data="tableData"
				stripe
				:cell-style="() => ({ textAlign: 'center' })"
				:header-cell-style="() => ({ textAlign: 'center' })"
				border
				size="small"
				@selection-change="handleSelectionChange"
			>
				<el-table-column
					type="selection"
					width="55"
					:selectable="row => row.refund_status !== 2 && row.refund_status !== 3"
				></el-table-column>
				<el-table-column label="序号" width="60px" type="index" />
				<el-table-column label="订单编号" prop="order_id" min-width="90px" show-overflow-tooltip />
				<el-table-column
					label="用户姓名"
					prop="player_name"
					min-width="120px"
					show-overflow-tooltip
				/>
				<el-table-column
					label="用户手机号"
					prop="player_mobile"
					min-width="120px"
					show-overflow-tooltip
				/>
				<el-table-column
					label="赛事名称"
					min-width="160px"
					show-overflow-tooltip
					:formatter="row => row.race.race_name || '--'"
				/>
				<el-table-column
					label="比赛城市"
					:formatter="row => row.race.city_name || '--'"
					min-width="100px"
					show-overflow-tooltip
				/>
				<el-table-column label="报名时间" prop="pay_time" min-width="160px" show-overflow-tooltip />
				<el-table-column
					label="支付金额(元)"
					prop="pay_money"
					min-width="120"
					show-overflow-tooltip
				/>
				<el-table-column label="参赛号" min-width="100px" show-overflow-tooltip prop="race_num" />
				<el-table-column
					label="领物窗口号"
					prop="window_num"
					min-width="110px"
					show-overflow-tooltip
				/>
				<el-table-column
					label="存取衣号"
					prop="clothes_num"
					min-width="120px"
					show-overflow-tooltip
				/>
				<el-table-column
					label="申请时间"
					prop="refund_time"
					min-width="160px"
					show-overflow-tooltip
				/>
				<el-table-column label="操作" width="180" fixed="right">
					<template slot-scope="scope">
						<el-button
							type="text"
							@click="onSubmitPass(scope.row)"
							v-prevent-click="1500"
							:disabled="scope.row.refund_status === 2 || scope.row.refund_status == 3"
						>
							审核通过
						</el-button>
						<el-button
							type="text"
							@click="onSubmitRefuse(scope.row)"
							style="color: #e65d6e"
							v-prevent-click="1500"
							:disabled="scope.row.refund_status === 2 || scope.row.refund_status == 3"
						>
							审核拒绝
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-row type="flex" justify="center">
				<el-col :span="24" style="text-align: right">
					<Pagination
						:total="total"
						:page.sync="pageNo"
						:limit.sync="pageSize"
						scroll-el="el-main"
						@pagination="loadData"
					/>
				</el-col>
			</el-row>
		</div>
		<shenhe ref="shenhe" />
	</div>
</template>

<script>
	import { getRefundList, refundVerify, adminSubLesson } from '@/api/order'
	import Pagination from '@/components/Pagination'
	import shenhe from './components/shenhe'
	export default {
		components: {
			Pagination,
			shenhe
		},
		data() {
			return {
				forms: {
					race_id: '',
					player_name: '',
					player_mobile: '',
					player_cid: ''
				},
				pageNo: 1,
				pageSize: 10,
				total: 0,
				tableData: [],
				raceOptions: [],
				multipleSelection: [],
				isLock: false
			}
		},
		created() {
			this.loadData()
		},
		methods: {
			// 搜索
			searchData() {
				this.pageNo = 1
				this.loadData()
			},
			// 分页
			pageChange({ page, limit }) {
				this.pageNo = page
				this.pageSize = limit
				this.loadData()
			},
			loadData() {
				const loading = this.$setLoading()
				const data = {
					...this.forms,
					p: this.pageNo,
					size: this.pageSize
				}
				this.tableData = []
				getRefundList(data).then(
					res => {
						this.tableData = res.data.lists
						this.total = Number(res.data.total)
						loading.close()
					},
					err => {
						loading.close()
					}
				)
			},
			seeDetails(row) {
				this.$refs.details.init(row)
			},
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			onSubmitRefuse(item) {
				if (this.isLock) return
				this.isLock = true
				const tips = item
					? `<p><b>是否拒绝${item.player_name}${item.player_mobile}的退费申请?</b><span style="display:block;margin-top:5px;">请输入拒绝原因</p>`
					: '是否拒绝已勾选的全部退费申请？'
				this.$prompt(tips, '退费确认', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /\S/,
					inputErrorMessage: '拒绝原因不能为空',
					dangerouslyUseHTMLString: true
				})
					.then(({ value }) => {
						const data = item ? [item] : this.multipleSelection
						const loading = this.$setLoading({ text: '提交中，请稍等~' })
						// check_status1通过2拒绝
						refundVerify({
							order_id: data.map(item => item.order_id),
							check_status: 2, //1通过2拒绝
							check_rerson: value.trim()
						}).then(
							res => {
								this.$message.success('支付提交成功！')
								this.loadData()
								this.isLock = false
								loading.close()
							},
							err => {
								this.isLock = false
								loading.close()
							}
						)
					})
					.catch(() => {
						this.isLock = false
					})
			},
			onSubmitPass(item) {
				if (this.isLock) return
				this.isLock = true
				const tips = item
					? `是否同意${item.player_name}${item.player_mobile}的退费申请？`
					: '是否同意已勾选的全部退费申请？'
				this.$confirm(tips, '退费确认', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
					.then(({ value }) => {
						const data = item ? [item] : this.multipleSelection
						const loading = this.$setLoading({ text: '提交中，请稍等~' })
						refundVerify({
							order_id: data.map(item => item.order_id),
							check_status: 1
						}).then(
							res => {
								this.$message.success('退款成功！')
								this.loadData()
								loading.close()
								this.isLock = false
							},
							err => {
								loading.close()
								this.isLock = false
							}
						)
					})
					.catch(err => {
						console.log(err)
						this.isLock = false
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.el-link {
		margin: 0 5px;
	}
	.form {
		background: #ffffff;
		padding: 20px 10px 0;
		margin-bottom: 10px;
		border-radius: 2px;
		display: flex;
		flex-wrap: wrap;
	}
	.line {
		height: 36px;
		margin: 0 0 10px 18px;
		border-left: 1px solid #e5e6eb !important;
		padding: 0 0 0 18px;
	}
	.answer-bot {
		padding: 16px;
		border-radius: 2px;
		background-color: #ffffff;
		.bot-title {
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #000000;
		}
	}
	::v-deep {
		.el-link {
			margin: 0 8px;
		}
		.el-button--medium {
			padding: 6px 5px;
		}
	}
</style>
